<template>
	<div class="personCenter">
		
		<div class="head">
			<p class='title-text'>个人中心</p>	
		</div>
		
		<div class="info">
			<div class="info-work">
				
				<div class="avatar">
					<p><router-link  class="iconfont icon-xinxi" to='/Notification'></router-link></p>
					<p><img class="ava-img" src="../assets/img/img_1.png" alt="" /></p>
					<p><router-link  class="iconfont icon-shezhi" to='/Setting'></router-link></p>
				</div>
				
				<div class="Introduction">
					<p>张绍</p>
					<p>川ja0251 <span class="gray">（工号）</span></p>
					<p class="colse-call">屏蔽呼叫</p>
				</div>
				
				<div class="order-box">
					<div>
						<p class='bule'>12</p>
						<p class="gray line">未完成订单</p>
					</div>
					<div>
						<p class='bule'>6790</p>
						<p class="gray line">已完成订单</p>
					</div>
					<div>
						<p class='bule'>23333</p>
						<p class="gray">累计收入(/元)</p>
					</div>
				</div>
				
				<div class="other-info">
					<div class="addr">
						<p class="gray">地址</p>
						<p>遂宁市香林南路19号</p>
					</div>
					<div class="phone">
						<p class="gray">手机号</p>
						<p>1530965987</p>
					</div>
					<div class="deposit">
						<div>
							<p class="gray">已缴纳押金</p>
							<p>200元(未解冻)</p>
						</div>
						<div>
							<p class="gray">同时接单数</p>
							<p>2单/小时</p>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	
	 <tabbar>
	      <tabbar-item selected link='/home'>
	        <span slot='icon' class="iconfont icon-comiishome"></span>
	        <span slot="label">首页</span>
	      </tabbar-item>
	      
	      <tabbar-item link='/orderlist'>
	        <span slot='icon' class="iconfont icon-liebiao-80"></span>
	        <span slot="label">订单</span>
	      </tabbar-item>
	      
	      <tabbar-item  link="/settlement">
	        <span slot='icon' class="iconfont icon-yijiesuan"></span>
	        <span slot="label">结算</span>
	      </tabbar-item>
	      
	      <tabbar-item link='/personcenter'>
	        <span slot='icon' class="iconfont icon-xinxi"></span>
	        <span slot="label">我的</span>
	      </tabbar-item>
	      
    </tabbar>
	
	</div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
  components: {
    Tabbar,
    TabbarItem
  },
  data () {
    return {
      show:false
  }
},
methods:{
}
}
</script>

<style scoped>
	.personCenter{
		margin-bottom: 60px;
	}
	.bule{
		color: #71B4EB;
	}
	.personCenter{
		height: 100vh;
		width: 100vw;
		background-color: white !important;
		
	}
	
	.title-text{
		width: 100%;
		text-align: center;
	}
	.info{
		padding: 15px;
		margin-bottom: 60px;
	}
	.icon-xinxi,.icon-shezhi{
		color: #71B4EB;
		font-size: 1.6rem;
	}
	.avatar{
		display: flex;
		width: 235px;
		height: 100px;
		text-align: center;
		margin: 30px auto;
		margin-bottom: 10px;
		line-height: 50px;
	}
	.avatar > p{
		height: 100px;
		line-height: 100px;
		flex: 1;
		text-align: center;
	}
	.ava-icon{
		line-height: 50px;
	}
	.ava-img{
		height: 100%;
		width: 100px;
		border-radius: 50%;
		overflow: hidden;
	}
	.Introduction{
		text-align: center;
		line-height: 30px;
	}
	.gray{
		color: #CCCCCC;
	}
	.colse-call{
		background-color: #71B4EB;
		color: white;
		width: 100px;
		border-radius: 15px;
		margin:10px auto;
	}
	
	.order-box{
		display: flex;
	}
	.order-box > div{
		flex: 1;
		text-align: center;
		line-height: 25px;
	}
	.other-info >div{
		margin-top: 15px;
		line-height: 25px;
	}
	.deposit{
		display: flex;
	}
	.deposit > div{
		flex: 1;
	}
	.line{
		border-right: 1px #ebebeb  solid;
	}

</style>